﻿@{
    ViewBag.Title = "Contact";
    Layout = null;
}

<!DOCTYPE>
  <html>
  <head>
    <meta charset="utf-8"/>
    <title>Posuvniky</title>
    <link rel="stylesheet" href="/lib/jquery-ui/css/smoothness/jquery-ui-1.8.10.custom.css">
    <link rel="stylesheet" href="/css/iThing.css" type="text/css" />
  </head>
  <body>
  <div id="first-block" class="block">
    <div class="mini-block">
    <label for="from">Розмістити від:</label>
    <input type="text" id="date-from" name="from" />
    </div>
    <div class="mini-block">
    <label for="to">до:</label>
    <input type="text" id="date-to" name="to" />
    +безкоштовно <span id="free-days">0</span> днів.
    </div>


    <div id="date-slider" style="margin:10px 0; padding: 5px 0; width: 50%"></div>


    <div class="mini-block">Ціна після скидки: <span id="priceAfterDiscount">0</span> CZK</div>
    <div class="mini-block">Скидка: <span id="discount">0</span>%</div>
    <div class="mini-block">Ціна без скидки: <span id="priceWithoutDiscount">0</span></div>

    <div id="price-slider" style="margin:10px 0; width: 50%"></div>

  </div>

    @*<div id="slider"></div>
    <div id="dateSlider"></div>
    <div id="editSlider"></div>*@
    <script src="/Scripts/jquery.js"></script>
    <script src="/Scripts/jquery-ui-1.8.16.custom.min.js"></script>
    <script src="/Scripts/jQAllRangeSliders-min.js"></script>
    @*<script src="/Scripts/jQRangeSlider-min.js"></script>*@
    <script>
        //<!--
        $("#price-slider").rangeSlider();
        $("#date-slider").dateRangeSlider();
//        $("#editSlider").editRangeSlider();
        //-->
    </script>
  </body>
</html>

<style>
    .mini-block
    {
        background-color:#DDDDDD;
        display:inline-block;
        padding: 3px 6px;
    }
</style>

<script>
var dateSlider = $('#date-slider'),
    priceSlider = $('#price-slider'),
    dateFrom = $('#date-from'), 
    dateTo = $('#date-to'),
    freeDays = $('#free-days');

dateFrom.datepicker({
    defaultDate: "+1w",
    changeMonth: true,
    numberOfMonths: 3,
    onClose: function (selectedDate) {
        dateTo.datepicker("option", "minDate", selectedDate);
    }
});
dateTo.datepicker({
    defaultDate: "+1w",
    changeMonth: true,
    numberOfMonths: 3,
    onClose: function (selectedDate) {
        dateFrom.datepicker("option", "maxDate", selectedDate);
    }
});

//dateSlider.dateRangeSlider("bounds", new Date(2013, 0, 1), new Date(2014, 0, 1));

dateSlider.dateRangeSlider({
    valueLabels: "change",
    delayOut: 5000
});

dateSlider.dateRangeSlider({
    valueLabels: "change",
    durationIn: 1000,
    durationOut: 1000
});

dateSlider.dateRangeSlider({
    enabled: true
});

dateSlider.dateRangeSlider({
    range: {
        min: { days: 1 },
        max: { days: 366 }
    }
});

dateSlider.dateRangeSlider({
    step: {
        days: 1
    }
});

//    var dateSliderBounds = dateSlider.dateRangeSlider("bounds");
//    console.log(dateSliderBounds.min.toString() + " " + dateSliderBounds.max.toString());

//    var dateSliderMax = dateSlider.dateRangeSlider("max");
//    console.log(dateSliderMax.toString());

// Calling this method forces the slider to update itself
// and display correctly
//dateSlider.rangeSlider('resize');

//dateSlider.rangeSlider('scrollRight', 10);




//price SLIDER
//priceSlider.rangeSlider("option", "bounds", { min: 200, max: 3200 });
priceSlider.rangeSlider({ bounds: { min: 30, max: 3200} });
priceSlider.rangeSlider({ arrows: false });

//----------------Functions-----------------------------
function addZero(n) {
    return n.length > 1 ? n : (+n > 0) ? "0" + n : n;
}

function calcDatesAndFreeDays() {
    var dateValues = dateSlider.dateRangeSlider("values");
    var daysFrom = dateValues.min.getDate(),
          monthFrom = dateValues.min.getMonth() + 1,
          yearFrom = dateValues.min.getFullYear();
    var daysTo = dateValues.max.getDate(),
        monthTo = dateValues.max.getMonth() + 1,
        yearTo = dateValues.max.getFullYear();
    dateFrom.val(addZero(monthFrom.toString()) + "/" + addZero(daysFrom.toString()) + "/" + yearFrom);
    dateTo.val(addZero(monthTo.toString()) + "/" + addZero(daysTo.toString()) + "/" + yearTo);

    var dt = new Date(dateTo.val()), df = new Date(dateFrom.val()),
        fd = Math.floor((dt - df) / (10 * 1000 * 60 * 60 * 24));
    freeDays.html(fd);
}
//----------------EVENTS-----------------------------
//    dateSlider.on("valuesChanging", function (e, data) {
//        console.log("Something moved. min: " + data.values.min + " max: " + data.values.max);
//    });

//    dateSlider.bind("valuesChanged", function (e, data) {
//        console.log("Values just changed. min: " + data.values.min + " max: " + data.values.max);
//    });

dateSlider.bind("valuesChanging", function (e, data) {
    calcDatesAndFreeDays();
});

dateFrom.bind('change', function () {
    var resultFromDate = new Date(dateFrom.val()),
        fromYear = resultFromDate.getFullYear(),
        dateValues = dateSlider.dateRangeSlider("values");
    if (fromYear < 2013) {
        resultFromDate = '01/01/2013';
        dateFrom.val(resultFromDate);
    }
    dateSlider.dateRangeSlider("values", new Date(resultFromDate), new Date(dateValues.max.toString()));

    //TODO: Move price slider
});

dateTo.bind('change', function () {
    var resultToDate = new Date(dateTo.val()),
        toYear = resultToDate.getFullYear(),
        toMonth = resultToDate.getMonth(),
        toDay = resultToDate.getDate(),
        dateValues = dateSlider.dateRangeSlider("values");
    if ((toYear > 2013) && (toMonth > 0 || toDay > 0)) {
        resultToDate = '01/01/2014';
        dateTo.val(resultToDate);
    }
    dateSlider.dateRangeSlider("values", new Date(dateValues.min.toString()), new Date(resultToDate));
});



$(document).ready(function () {
    calcDatesAndFreeDays();
});    
</script>